<template>
  <div>
    {{ names }}
    {{ age }}
  </div>
</template>

<script>
import { ref, reactive, readonly, toRefs, toRef } from 'vue'
export default {
    setup() {
        // let names = '章三'
        // 基本数据类型 ref 
        // ref 里面的值发生变化 页面会重新渲染
        // 变量.value = ''
        // let names = ref('章三')
        
        // proxy({value: '章三'})

        // setTimeout(() => {
        //     names.value = '李四'
        // }, 2000)

        // console.log(names)

        let obj = reactive({names: '张安'})

        let age = toRef(obj, 'age')


        // {names: '张安'}  proxy({names: '张安'})
        setTimeout(() => {
            age.value = 19
        }, 2000)

        // toRefs: 解构对象内的属性也有双向绑定功能
        // let {names, age} = toRefs(obj);
        return {
            // names,
            obj,
            age
        }
    }
}
</script>

<style>

</style>
